let month_olypic = [31,29,31,30,31,30,31,31,30,31,30,31] // 闰年每个月份的天数
let month_normal = [31,28,31,30,31,30,31,31,30,31,30,31] // 平年每个月份的天数

// 封装选择器
$ = (params) => document.querySelector(params)


// 获取元素
let daysList = $('#days')
let sYear = $('.select-year')
let sMonth = $('.select-month')
let monthsList = $('#months')
let changeMonth = $('.change2')
let changeYear = $('.change1')
let cM = $('.calendar-month')
let cY = $('.calendar-year')
let cYear = $('.change-year')


// 获取当天的年月日信息
var current_date = new Date()
var current_year = current_date.getFullYear() //获取年份
var current_month = current_date.getMonth() //获取月份，一月份的下标为0
var current_day = current_date.getDate() //获取当前日期
var cMonth = current_month + 1 // 月年切换设定初始值

// 根据年月获取当月第一天是星期几
function dayStart(month, year) {
  let tmpDate = new Date(year, month, 1)
  return (tmpDate.getDay())
}

// 根据年月获取当月最后一天是星期几
function dayEnd(month,year) {
  let endDate = new Date(year, month + 1, 0)
  return (endDate.getDay())
}

// 根据年份判断某月有多少天
function daysMonth(month, year) {
  let tmp1 = year % 4
  let tmp2 = year % 100
  let tmp3 = year % 400

  if((tmp1 == 0 && tmp2 != 0) || (tmp3 == 0)) {
    // 闰年 
    return (month_olypic[month])
  } else {
    // 平年
    return (month_normal[month])
  }
}

// 实现日的插入
function refreshDate(current_month, current_year) {
  current_month = Number(current_month  )
  let str = ''
  // 计算当月的天数、每月第一天、每月的最后一天、当月上个月的天数
  let totalDay = daysMonth(current_month,current_year)
  let firstDay = dayStart(current_month, current_year)
  let endDay = dayEnd(current_month, current_year)
  let prevDays = daysMonth(current_month - 1,current_year)

  // 添加上个月信息
  // 因为 每周的信息是从星期天开始，即0-6，所以需要判断是否为0
  if(firstDay !== 0) {
    // 因为 1月实际为0，当他减一后为-1，表示为undefined，所以这里做出当月为1月时的判断
    if(prevDays == undefined) {
      for(let j = 31- firstDay + 2; j <= 31 ; j++) {
        str += "<li class='lightgrey prev'>"+ j +"</li>"
      }
    } else {
      for(let j = prevDays - firstDay + 2; j <= prevDays ; j++) {
        str += "<li class='lightgrey prev'>"+ j +"</li>"
      }
    }
  } else { // 当为星期天时的判断
    for(let j = prevDays - 7 + 2; j <= prevDays ; j++) {
      str += "<li class='lightgrey prev'>"+ j +"</li>"
    }
  }

  //从当月一号开始添加 totalDay，并为当天添加样式
  let dateClass
  for(let i = 1; i <= totalDay; i++) {
    // 当前年 当前月 当前天给定 blue bluebox
    // 点击天 给定bluebox 
    // 其他给定 darkgrey
    if(current_year == current_date.getFullYear() && current_month == current_date.getMonth() && i == current_day) {
      dateClass = "class = 'blue bluebox'"
    } else if(i == current_day) {
      dateClass = "class = 'bluebox'"
    } else {
      dateClass = "class = 'darkgrey'"
    }
    str += "<li "+dateClass+">"+i+"</li>"
  }

  // 添加下个月信息
  for(let i = 1; i < 8-endDay; i++) {
    str += "<li class='lightgrey next'>"+ i +"</li>"
  }

  // 渲染列表
  daysList.innerHTML = str
  sYear.value = current_year
  sMonth.value = current_month + 1
}

refreshDate(current_month,current_year)

// 实现点击给当前天添加样式
daysList.onclick = e => {
  e.preventDefault()
  // 拿到目标源
  tArr = e.target.parentNode.childNodes
  
  // 通过遍历数组取消样式
  for(let i = 0; i<tArr.length;i++) {
    if(tArr[i].className=="bluebox" || tArr[i].className=="blue bluebox" || tArr[i].className=="darkgrey bluebox") {
      tArr[i].classList.remove("bluebox")
    }
  }
 
  // 判断id是否为 父元素ul 的id，防止改变 ul 的样式
  if(e.target.id !== 'days') {
    e.target.classList.add('bluebox')
  }
}

// 实现改变年数变更日历
sYear.onchange = () => {
  let current_year = sYear.value
  let current_month = sMonth.value - 1
  refreshDate(current_month, current_year)
}

// 实现改变月份变更日历
sMonth.onchange = e => {
  let current_month = sMonth.value - 1
  let current_year = sYear.value
  refreshDate(current_month, current_year)
}

// 实现切换成月
changeMonth.onclick = e => {
  let change = e.target.firstChild.nodeValue
  if(change == '月') {
    cY.style.display = 'none'
    cM.style.display = 'block'
  }
  current_year = cYear.value
  current_month = cMonth - 1
  refreshDate(current_month, current_year)
}

// 实现切换成年
changeYear.onclick = e => {
  let change = e.target.firstChild.nodeValue
  if(change == '年') {
    cM.style.display = 'none'
    cY.style.display = 'block'
  }
  current_year = sYear.value
  current_month = sMonth.value - 1
  refreshMonth(current_month, current_year)
}

// 实现月信息的插入
function refreshMonth(current_month,current_year) {
  let str = ""
  let monthClass
  for(let i = 1; i <= 12; i++) {
    if(current_year == current_date.getFullYear() && current_month == current_date.getMonth() && i == current_month + 1) {
      monthClass = "class = 'blue bluebox'"
    } else if(i == current_month + 1) {
      monthClass = "class = 'bluebox'"
    } else {
      monthClass = "class = 'darkgrey'"
    }
    str += "<li "+monthClass+">"+i+"</li>"
  }
  monthsList.innerHTML = str
  cYear.value = current_year
}

refreshMonth(current_month,current_year)

// 实现点击当前月添加样式
monthsList.onclick = e => {
  e.preventDefault()
  // 拿到目标源
  tArr = e.target.parentNode.childNodes
  // 通过遍历数组取消样式
  for(let i = 0; i<tArr.length;i++) {
    if(tArr[i].className=="bluebox" || tArr[i].className=="blue bluebox" || tArr[i].className=="darkgrey bluebox") {
      tArr[i].classList.remove("bluebox")
    }
  }
  // 判断id是否为 父元素ul 的id，防止改变 ul 的样式
  if(e.target.id !== 'months') {
    e.target.classList.add('bluebox')
    cMonth = e.target.innerHTML
  }
}


// 实现点击切换月份
daysList.addEventListener('click', function(e){
  if(e.target.classList.contains('prev')) { // 切换上个月
    current_month--
    if(current_month < 0){
      current_year--
      current_month = 11
    }
  } else if(e.target.classList.contains('next')) { // 切换下个月
    current_month++
    if(current_month > 11){
      current_month = 0 
      current_year++
    }
  } else {
    return false
  }
  refreshDate(current_month, current_year)
},false)


// 切换成下个月


// 禁止文字被鼠标选中
document.onselectstart = function() {
  return false
}
